<!--
  组件：功能导航
  作者：kuake
  时间：2023年01月02日
  网址：https://gis.1024ape.com
  系统：WebGIS 地理信息平台
-->
<template>
	<div class="nav-box">
		<ul class="nav">
			<li
				v-for="(item, i) in menuItems"
				:key="i"
				@click="menuHandle($event, item)"
			>
				<span>{{ item.label }}</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'FmNav',
	data() {
		return {
			menuItems: [
				{
					label: '基础功能',
					enable: false
				},
				{
					label: '绘制工具',
					enable: false
				},
				{
					label: '图层管理',
					enable: false
				},
				{
					label: '辅助工具',
					enable: false
				},
				{
					label: '关于本站',
					enable: false
				}
			]
		}
	},
	methods: {
		menuHandle(event, item) {
			console.log(event, item)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-box {
	display: flex;
	align-items: center;
	margin-left: 120px;
	font-size: 14px;
	.nav {
		display: flex;
		li {
			width: 58px;
			text-align: center;
			font-weight: bold;
			padding: 0px 15px;
			border-radius: 2px;
			cursor: pointer;
			user-select: none;
			&:hover {
				background: #083360;
			}
		}
	}
}
</style>
